<template>
  <div class="full-width">
    <div id="header"
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 min-width-130">
      <div class="width-130 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div class="width-130 mx-auto mt-30 flex_end_center">
      <el-input
        v-model="state.keyWord"
        placeholder="Please input"
        clearable
        @clear="handleChangeKeyword('')"
        @change="handleChangeKeyword"
        class="input-with-select width-22 mr-2"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <el-date-picker
        v-model="state.month"
        type="month"
        clearable
        value-format="YYYY-MM-DD"
        @clear="handleClear"
        @change="handleChangeMonth"
        placeholder="Pick a month"
      />
    </div>
    <div class="width-130 d-flex flex-wrap mx-auto mt-10">
      <div class="news-item flex-column height-50 width-30 rounded-10 mx-2 mb-6 of-hidden cursor-pointer" @click="handleGetDetail(item.id)" v-for="(item, index) in state.list" :key="index">
        <el-image class="width-30 height-27" :src="item.showImg" fit="cover" />
        <div class="p-5">
          <span class="text-14 text-gray-light1">{{item.createdAt}}</span>
          <p class="text-18 my-4">{{item.title}}</p>
          <p >{{item.intro}}</p>
          <moreBtn/>
        </div>
      </div>
      <el-empty class="mx-auto" v-if="!state.list.length" description="no data" />
    </div>
    <a-button :disabled="!state.hasMore" v-if="state.list.length" @click="handleGetMore" class="hoverbtn flex_between_center mx-auto mt-8 mb-54 width-20 px-11 py-2 border border-color-dark rounded-5 cursor-pointer">
      <span>{{lang === 'zh_CN' ? '查看更多' : 'More'}}</span>
      <span>></span>
    </a-button>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import urls from '@/api/index'
import { Search } from '@element-plus/icons-vue'
import { onMounted, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import { useRouter } from 'vue-router'

const router = useRouter()
const lang = computed(() => userStore.state.lang)

const state = reactive({
  owner: router.currentRoute.value.query.id,
  title: '企业新闻',
  detail: {},
  list: [],
  keyWord: '',
  month: '',
  total: 0,
  pageSize: 12,
  hasMore: true,
  newsDetail: {}
})
watch(() => router.currentRoute.value.query.id, (newVal) => {
  state.owner = newVal
  getList()
  getDetail()
})
const handleChangeMonth = (val) => {
  state.month = val
  getList()
}
const handleClear = () => {
  state.month = ''
  getList()
}
const handleChangeKeyword = (val) => {
  state.keyWord = val
  getList()
}
const handleGetMore = () => {
  if (state.hasMore) {
    state.pageSize += 4
    getList()
  } else {
    ElMessage.warning('抱歉暂时没有更多新闻～')
  }
}
const handleGetDetail = (id) => {
  router.push({
    path: '/newsDetail',
    query: { id }
  })
  userStore.commit('ADDBREADCRUMB', [{ path: '/news', name: 'message.MEDIA_SOURCE', query: { id: '62d6bfcbe1d8375b113f70a9' } }, { path: '/news', name: 'message.NEWS', query: { id: '62d6bfcbe1d8375b113f70a9' } }, { path: '/newsDetail', name: 'message.NEWS_DETAIL', query: { id } }])
}
const getList = () => {
  const params = {
    lang: userStore.state.lang,
    createdAt: state.month,
    owner: state.owner,
    page: 1,
    pageSize: state.pageSize,
    title: state.keyWord
  }
  urls.news.getList(params)
    .then(res => {
      state.list = res.data.items
      state.total = res.data.totalNum
      if (state.pageSize < state.total) {
        state.hasMore = true
      } else {
        state.hasMore = false
      }
    })
    .catch(err => {
      ElMessage.error(err.msg)
    })
}
watch(() => userStore.state.lang, () => {
  getList()
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    id: state.owner,
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params)
    .then(res => {
      state.detail = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  getDetail()
  getList()
  const header = document.getElementById('header')
  header.scrollIntoView()
})
</script>

<style lang="scss" scoped>
.bg_img {
  background: url("@/assets/images/newsBg.jpg") no-repeat;
  background-size: cover;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}
.news-item {
  background-color: #F3F3F3;
   p{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-all;
  }
}
.news-item:hover{
  color: #fff;
  background: #222!important;
  img{
    filter: blur(5px);
  }
}
.hoverbtn:hover{
  background: #333;
  color: #fff;
  border: none;
}
</style>
